﻿@model AdminUserModel
<div id="admin_users" class="page" v-cloak>
    <Tabs ref="tabs" v-model="currentTab">
        <TabPane label="会员列表">
            <datagrid ref="usergrid" :columns="gridColumns" v-on:new="newUser" :edit="editSetting" :url="'@ViewBag.DataUrl'"></datagrid>
        </TabPane>
        <TabPane :label="tabTitle" v-show="tabTitle">
            <form id="user_form" role="form" action="@ViewBag.SubmitUrl" method="post" class="am-form am-form-h box" enctype="multipart/form-data" style="position:relative;padding:10px 8px;border:0;box-shadow:none">
                <input type="hidden" name="Id" id="user_id" value="" />
                <input type="hidden" name="MenuId" value="@ViewBag.MenuId" />
                <div class="am-form-group">
                    <label for="user_loginId" class="am-u-sm-2 am-form-label">登录账号<em>*</em></label>
                    <div class="am-u-sm-10"><input type="text" name="LoginId" id="user_loginId" required /></div>
                </div>
                <div class="am-form-group">
                    <label for="user_password" class="am-u-sm-2 am-form-label">密码<em>*</em></label>
                    <div class="am-u-sm-10"><input type="text" name="Password" id="user_password" v-model="pass" /></div>
                </div>
                <div class="am-form-group">
                    <label for="user_name" class="am-u-sm-2 am-form-label">姓名</label>
                    <div class="am-u-sm-10"><input type="text" name="Name" id="user_name" /></div>
                </div>
                <div class="am-form-group">
                    <label for="user_position" class="am-u-sm-2 am-form-label">职位</label>
                    <div class="am-u-sm-10"><input type="text" name="Position" id="user_position" /></div>
                </div>
                <div class="am-form-group">
                    <label for="user_roles" class="am-u-sm-2 am-form-label">角色<em>*</em></label>
                    <div class="am-u-sm-10">
                        <i-select name="Roles" id="user_roles" multiple style="width:100%" :options="roles" required placeholder="请选择角色...">
                        </i-select>
                    </div>
                </div>
                <div class="am-text-center">
                    <input type="button" value="重置" class="am-btn am-btn-default" style="margin-right:20px" @@click="resetForm()" />
                    <button type="submit" class="am-btn am-btn-success"><i class="am-icon-spinner fa-spin" v-show="submitting"></i> {{submitting?'正在提交...':'保存信息'}}</button>
                </div>
            </form>
        </TabPane>
    </Tabs>
</div>
@section script {
    <script>
    var user_vm;
    user_vm = new Vue({
        el: '#admin_users',
        data: {
            currentTab: 0,
            pass: '',
            submitting: false,
            editSetting: {showNew:true,delUrl:'@ViewBag.DelUrl'},
            tabTitle: '',
            gridData: [],
            roles: @Html.Raw(Colorful.JsonHelper.ToJson(Model.Roles.Select(a => new { id = a.Id, text = a.Name }).ToArray())),
            menus: [],
            gridColumns: [
                { bind: 'LoginId', title: '登录Id', sort: 1 },
                { bind: 'Name', title: '姓名' },
                { bind: 'Position', title: '职位' },
                {
                    bind: 'Id', title: '编辑', width: '100px', format: function (val, data) {
                        if (data.LoginId == "admin") return "";
                        var html = '<div class="tb-item-edit"><a class="am-btn am-btn-info" onclick="user_vm.editUser(\'' + val + '\')"><i class="am-icon-edit"></i></a>';
                        html += '<a class="am-btn am-btn-danger" onclick="user_vm.delUser(\'' + val + '\')"><i class="am-icon-trash"></i></a></div>';
                        return html;
                    }
                },
                { bind: 'LastModify', title: '更新时间' }
            ]
        },
        methods: {
            resetForm: function () {
                $('#user_form').resetForm();
            },
            setForm: function () {
                var self = this;
                $('#user_form').asyncSubmit(function (result) {
                    self.currentTab = 0;
                    self.$refs.usergrid.reload();
                    self.$Message.success("删除成功！");
                });
            },
            newUser: function () {
                console.log("new user!!");
                $('#user_btn_reset').click();
                this.pass = $.CUI.utils.getPassword(8);
                this.tabTitle = "新建用户";
                this.currentTab = 1;
                $('#user_id').val('');
                
            },
            editUser: function (id) {
                var self = this;
                $.post('@ViewBag.InfoUrl', { id: id }, function (result) {
                    if (result.succ) {
                        self.currentTab = 1;
                        self.tabTitle = "编辑用户";
                        self.pass = '';
                        result.data.Password = "";
                        $('#user_form').fill(result.data);
                        $('#Password').val('');
                    } else {
                        alert(result.data);
                    }
                });
            },
            delUser: function (id) {
                var self = this;
                if (confirm("确定删除？")) {
                    $.post('@ViewBag.DelUrl', { ids: id, menuId: @ViewBag.MenuId }, function (result) {
                        if (result.succ) {
                            self.$Message.success("删除成功！");
                            self.$refs.usergrid.reload();
                        } else {
                            alert(result.data);
                        }
                    });
                }
            }
        },
        mounted: function () {
            this.setForm();
        }
    });
    </script>
}